<template>
    <div class="equipment">
        <customHeader :middleTitle="title" @leftCallBack="goBack" />
        <div class="content">
            <div class="content-bottom">
                <van-cell title="设备类型" @click="selectdevice" :is-link="true" :value="cellvalue" />
            </div>
            <div class="content-top">
                <div>唯一识别码<span class="spanred">*</span></div>
                <div class="content-top-bottom">
                    <input type="text" v-model="snvalue" placeholder="请手动或扫码输入sn码">
                    <p @click="handleScan">
                        <span>|</span>
                        <img src="../../assets/images/scanit.png" alt="">
                        扫码填入
                    </p>
                </div>
            </div>

        </div>
        <div class="unbindbutton" @click="handleUnBind">绑定</div>
        <van-popup v-model="show" position="bottom" :style="{ height: '40%' }">
             <van-picker
                title="选择设备类型"
                show-toolbar
                visible-item-count="3"
                :columns="columns"
                @confirm="onConfirm"
                @cancel="onCancel"
                @change="onChange"
                cancel-button-text="X"
            />
        </van-popup>
       
    </div>
</template>
<script>
import customHeader from "../../components/header/header";
import { RadioGroup, Radio } from 'vant';
import { Picker } from 'vant';
import { Popup } from 'vant';
import { Toast, MessageBox } from "mint-ui";
export default {
    components: {
        customHeader
    },
    data() {
        return {
            cellvalue:"选择设备",
            show:false,
            snvalue: '',
            radio: null,
            title: this.$route.query.type ? '音响绑定' : '机具绑定',
            reasonlist: this.$route.query.type ? [
                '音响不再播报', '商户不再使用', '商户未达标回收', '其他原因'
            ] : [
                '机具损坏', '商户不再使用', '商户未达标回收', '其他原因'
            ],
            type: "",
            resultObjectlist: [],
            currentPage: 1,
            columns: ['音响', '扫码牌', '其他'],

        }
    },
    created() {
        console.log(this.$route.query.shopId);
    },
    computed: {
    },
    methods: {
        onConfirm(value, index) {
            // Toast(`当前值：${value}, 当前索引：${index}`);
            this.cellvalue = value;
            this.show = false
        },
        // onChange(picker, value, index) {
        //     Toast(`当前值：${value}, 当前索引：${index}`);
        // },
        onCancel() {
           this.show = false
        },
        selectdevice() {
            this.show=true
        },
        async seektype() {
            let { resultObject } = await this.ajax({
                url: `newapp/machineTool/getMachineToolList.do?currentPage=${this.currentPage}&pageSize=10&shopId=${this.$route.query.shopId}`,
                type: "get",
                controlLoading: true
            })
            this.resultObjectlist = resultObject.list
            // console.log(this.resultObjectlist);
            if (this.resultObjectlist.length < 10) {
                this.type = this.resultObjectlist.filter((item) => item.machineToolSn == this.snvalue)[0].machineToolType
                return
            } else {
                this.currentPage++
                await this.seektype()
            }
        },

        handleUnBind() {

            if (this.snvalue.length == 0) {
                return
            } else if (this.radio == null) {
                Toast('请选择解绑原因')
                return
            }
            console.log(this.radio);
            let msg = "解绑后设备无法收款，确定要解绑吗？"
            if (this.$route.query.type) {
                msg = "解绑后设备无法语音播报，确定要解绑吗？"
            }
            MessageBox({
                title: "解除绑定",
                message: msg,
                showCancelButton: true,
                closeOnClickModal: false
            }).then(action => {
                if (action == "confirm") {
                    this.unbindfun();
                }
            });
        },

        async unbindfun() {

            console.log('asasa');
            await this.seektype()
            console.log(this.type);
            const url = `app/voice/unbindShop.do?sn=${this.snvalue}&type=${this.type
                }&shopId=${this.shopId}`;
            console.log(url);
            this.ajax({
                url: url,
                type: "get",
                controlLoading: true
            })
                .then(res => {
                    if (res.success == true) {
                        const url = "/qrCodeSound/mainSettings/unBindingSuccess";
                        this.$router.push({
                            path: url,
                            query: { from: this.from }
                        });
                    } else {
                        MessageBox({
                            title: "解绑失败",
                            message: res.msg,
                            showCancelButton: false,
                            confirmButtonText: "知道了",
                            closeOnClickModal: false
                        });
                    }
                })
                .catch(err => {

                });

        },
        goBack() {
            if (String(this.$route.query.close) === 'true') {
                jsBridge.closeWindow();
            } else {
                this.$router.back();
            }
        },
        handleScan() {
            Toast('近期上线，敬请期待...')
            // jsBridge.scanQRCode({ type: "bar" }, response => {
            //     console.log(response);
            //     if (
            //         response &&
            //         (response.success === true || response.success === "true")
            //     ) {
            //         this.serialCode = this.checkScanResult(response.resultObject);
            //         if (!this.serialCode) {
            //             Toast("请扫描正确的识别码");
            //         }
            //     } else {
            //         Toast("扫码失败");
            //     }
            // });
        }
    },
}
</script>
<style lang="scss" scoped>
@import './index.scss'
</style>
